<template>
    <div style="width: 100%;height: 100%;background-color: red;position:relative;">
        <div id="map" style="width: 100%;height: 100%;"></div>
        <!--左上角-->
        <div style="
                position: absolute;top: 10px;right: 45px;
                display: flex;flex-direction: column; align-items: center;
                gap:5px;">
            <el-button size="mini" round @click="initEnv" style=" width: 120px !important;margin-left: 0 !important; ">调接口拿数据</el-button>
            <el-button size="mini" round @click="startMove" style=" width: 120px !important;margin-left: 0 !important; "> 开始</el-button>
            <el-button size="mini" round @click="pauseMove" style=" width: 120px !important;margin-left: 0 !important; "> 暂停</el-button>
            <el-button size="mini" round @click="continueMove" style=" width: 120px !important;margin-left: 0 !important; "> 继续</el-button>
            <el-button size="mini" round @click="speedUp" style=" width: 120px !important;margin-left: 0 !important; "> 加速</el-button>
            <el-button size="mini" round @click="speedDown" style=" width: 120px !important;margin-left: 0 !important; "> 减速</el-button>
        </div>
    </div>
</template>
<script>
    import maps from '@/util/bigMap'
    import mJson from "@/assets/json/轨迹回放数据.json";

    let BM; //bigmap实体类
    let map;//地图类
    let polyline; //轨迹线
    let passedLine;//已走过路径
    let currentMarker; //当前点
    export default {
        data(){
            return {
                trainListPointsLocation: [],//存放轨迹经纬度
                trainHistoryInfo: [],//用来存放详细信息
                currentIndex: null, // 当前点的索引
            }
        },
        async mounted() {
            this.initMap();
        },
        beforeDestroy() {
            if (map) {
                map.remove();
            }
        },
        methods: {
            //初始化地图
            initMap() {
                maps.then(() => {
                    BM = window.BM;
                    //这里之后会换成加载瓦片图的地址
                    BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/";
                    map = BM.map('map', 'bigemap.dc-satellite', {
                        crs: BM.CRS.EPSG4326, //坐标参考系统:EPSG4326
                        center: [30.4, 104.5],
                        zoom: 7,
                        zoomControl: true,
                        attributionControl: false,
                    }).addEventListener('zoomend', function (e) {
                        this.zoomLevel = e.target._zoom;
                        console.log('当前级别 : ' + this.zoomLevel);
                    });
                    // 添加街道图层
                    BM.tileLayer("bigemap.dc-street").addTo(map);
                });
            },
            //初始化场景
            initEnv() {
                mJson.forEach((item) => {
                    if (item.latitude && item.longitude) {
                        this.trainHistoryInfo.push(item);
                        this.trainListPointsLocation.push([item.latitude, item.longitude]);
                    }
                });
                //添加轨迹线
                polyline = BM.polyline(this.trainListPointsLocation).addTo(map);
                map.fitBounds(polyline.getBounds());//适配一下边界，调整地图等级
                //添加初始点
                currentMarker = BM.marker(this.trainListPointsLocation[0], {
                    icon: BM.icon({
                        iconUrl: require('@/assets/images/online_train.png'),
                        iconAnchor: [25, 25],
                        iconSize: [35, 35]
                    }),
                }).addTo(map);
                //添加一条线段也记录已经路过的点
                passedLine = BM.polyline([[]], { color: "red" }).addTo(map);
                //监听当前点
                let that = this;
                currentMarker.on('update_position', function (e) {
                    //每次坐标更新。然后也更新路径
                    passedLine.setLatLngs(e.path);
                    // 切换场景弹窗
                    if (e.index !== that.currentIndex) {
                        that.currentIndex = Number(e.index);
                        that.updateMarkerPopup(that.currentIndex);
                    }
                });
            },
            // 更新车辆标记弹窗
            updateMarkerPopup(index) {
                if (!currentMarker.getPopup()) {
                    currentMarker.bindPopup(this.getPopupContent(index), {
                        className: "popTable",
                        closeButton: false,
                        offset: [-5, -5],
                    });
                    currentMarker.openPopup();
                } else {
                    currentMarker.setPopupContent(this.getPopupContent(index));
                    currentMarker.openPopup();
                }
            },
            // 获取弹窗内容
            getPopupContent(index) {
                const item = this.trainHistoryInfo[index] || this.trainHistoryInfo[0];
                return `
                    <div style="padding: 10px; min-width: 200px;">
                      <h3 style="margin: 0 0 10px; font-size: 16px;">机车信息</h3>
                      <p><strong>时间:</strong> ${item.createTime || '-'}</p>
                      <p><strong>线路名称:</strong> ${item.lineName || '-'}</p>
                      <p><strong>机车号:</strong> ${item.en || '-'}</p>
                      <p><strong>车次号:</strong> ${item.tn || '-'}</p>
                      <p><strong>速度:</strong> ${item.speed ? item.speed + 'km/h' : '-'}</p>
                      <p><strong>公里标:</strong> ${item.kilometer || '-'}</p>
                    </div>
              `;
            },
            //开始移动
            startMove(){
                if (!currentMarker || !polyline) return;
                currentMarker.moveAlong(polyline, 500, {
                    replay: false //默认是循环回放 replay:true
                });
            },
            //暂停移动
            pauseMove(){
                currentMarker.pauseMove();
            },
            //继续移动
            continueMove(){
                try {
                    currentMarker.resumeMove();
                } catch (error) {
                    alert('先点击开始才能点击继续哦')
                }
            },
            //加速
            speedUp(){
                currentMarker.setSpeed(currentMarker.getSpeed() + 300);
            },
            //减速
            speedDown(){
                currentMarker.setSpeed(currentMarker.getSpeed() - 100);
            },
        }
    }
</script>